<template>
  <div
    class="radioMoreList"
    :style="'background: url('+backimg+') center/cover no-repeat'"
  >
    <div class="nav">
      <van-icon
        name="arrow-left"
        @click="goback"
        class="clikes"
      />
      <span class="lyrics">歌词</span>
    </div>
    <!-- <div class="all"> -->

    <ul
      ref="lyricUL"
      class="oUl"
    >
      <li
        v-for="(item, i) in lyricsObjArr"
        :style="{'color': lyricIndex === i ? '#31c27c' : '#fff'}"
        :key="item.uid"
        :data-index="i"
        ref="lyric"
      >{{item.lyric}}</li>
    </ul>
    <!-- </div> -->
    <div>
      <audio
        @timeupdate="updateTime"
        :src="musicGo"
        id="myVideo"
        autoplay
      ></audio>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    id: '',
    musicGo: '',
    lyric: '',//歌词数据
    lyricsObjArr: [],
    lyricIndex: '0',
    backimg: ''
  }),
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    updateProgress(currentTime, duration) { // 更新进度条
      const precent = `${((currentTime / duration) * 100).toFixed(5)}%`
      this.precent = precent
    },
    formatTime(time) {
      if (time === 0) {
        this.curTime = '00:00'
        return
      }
      const mins = Math.floor(time / 60) < 10 ? `0${Math.floor(time / 60)}` : Math.floor(time / 60)
      const sec = Math.floor(time % 60) < 10 ? `0${Math.floor(time % 60)}` : Math.floor(time % 60)
      return `${mins}:${sec}`
    },
    updateTime(e) { // timeupdate时获取当前播放时间
      try {
        const { currentTime } = e.target
        this.currentTime = currentTime
        this.curTime = this.formatTime(currentTime) === 'undefined' ? '00:00' : this.formatTime(currentTime)
        this.updateProgress(currentTime, this.duration)
        // 匹配歌词
        for (let i = 0; i < this.lyricsObjArr.length; i++) {
          if (this.currentTime > (parseInt(this.lyricsObjArr[i].time))) {
            const index = this.$refs.lyric[i].dataset.index
            if (i === parseInt(index)) {
              this.lyricIndex = i
              this.$refs.lyricUL.style.transform = `translateY(${170 - (50 * (i + 1))}px)`
            }
          }
        }
      } catch (error) {
        console.log(error)
      }

    },
    getParams() {
      var routerParams = this.$route.query.mid
      this.id = routerParams
      // console.log(this.$route)
      this.backimg = this.$route.query.logo
    },
    async getMusicPlay() {
      const res = await this.$http.getMusicPlay(this.id);
      this.musicGo = res.data.response.playLists[0]
      // console.log(res);
    },
    // 时间转换
    formatLyricTime(time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./

      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },

    // 获取歌词并进行拆分
    async getLyric() {
      // 取出歌词
      const res = await this.$http.getLyric(this.id)
      let lyric = res.data.response.lyric

      // 每行歌词的数组
      const regNewLine = /\n/
      const lineArr = lyric.split(regNewLine)

      // 匹配[]中的时间
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      // 对lineArr数组进行遍历分隔
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)

        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric === '') {
        } else {
          this.lyricsObjArr.push(obj)
        }
      })
    },
    goback() {
      this.$router.go(-1);
    }
  },
  created() {
    this.getParams()
    this.getMusicPlay()
    this.getLyric()
  },
  watch: {
    '$route': 'getParams'
  }
}
</script>
<style lang="scss" scoped>
.radioMoreList {
  overflow: hidden;
  width: 100%;
  text-align: center;
  // filter: blur(10px);
  .nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #52856c;
    display: flex;
    justify-content: space-between;
    // margin: 10px 10px 0px;
    color: #fff;
    z-index: 999;
    position: fixed;
    .lyrics {
      flex: 1;
    }
    .clikes {
      pointer-events: painted;
      line-height: 50px;
    }
  }
  .musicShow {
    width: 100%;
    position: relative;
    z-index: 1;
    .title {
      padding-top: 80px;
      font-size: 20px;
      font-weight: 600;
      color: #999;
    }
    .txtAutor {
      margin-top: 12px;
      font-size: 16px;
      padding-bottom: 80px;
    }
  }
}
.oUl {
  height: 736px;
  width: 380px;
  line-height: 52px;
  font-family: cursive;
  text-align: center;
  font-size: 18px;
  margin: 0 30px;
  z-index: 1;
}
</style>